<template>
  <page-main>
    <template #right>
      <!-- <el-button type="default" icon="download" @click="handleExport('分配记录','/admin/settlementRecord/export', {})">导出</el-button> -->
    </template>
    <el-form :inline="true" :model="form" label-width="80" class="search-form">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item label="日期：">
            <my-date-range ref="refMyDateRange" v-model:start="searchForm.startDate" v-model:end="searchForm.endDate" type="daterange" />
            <!-- <el-date-picker v-model="searchForm.yearMonth" type="month" value-format="YYYY-MM" placeholder="请选择"/> -->
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selectCheckbox"
          >
          <el-table-column label="用户id" prop="userId"/>
          <el-table-column label="用户名" prop="userName"/>
          <el-table-column label="收入" prop="amount"/>
          <el-table-column label="创建时间" prop="createTime"/>
        </el-table>
  </page-main>
</template>

<script setup lang="ts">
import {dayjs} from 'element-plus';
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
let searchForm = reactive({
  startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
  endDate: dayjs().format('YYYY-MM-DD')
});
let tableData = reactive({
  loading: false,
  list: [],
});
const getList = () => {
  tableData.loading = true;
  proxy.$request('get', '/admin/statistics/getVipDetails', searchForm, (data,msg) => {
    tableData.list = data;
    tableData.loading = false;
  },msg => {
    tableData.loading = false;
  })
}
onMounted(async () => {
  getList()
  
})
</script>

<style>

</style>